import React, { Component } from 'react';
import { Grid, Select, Search, CascaderSelect, DatePicker } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import service from '../../../../utils/service';
import api from '../../../../utils/api';

const { Row, Col } = Grid;
const { YearPicker } = DatePicker;
// 数据类型 0->销量，1->销售额
const dataType = [
  { label: '销量', value: '0' },
  { label: '销售额', value: '1' },
];
export default class chooseHead extends Component {
  static displayName = '筛选条件';
  static propTypes = {};
  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      filterData: {
        time: '',
        w_id: '',
        class_id: '',
        price: '1',
      },
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.storeList && nextProps.GoodsTypeList) {
      this.setState(
        {
          GoodsTypeList: nextProps.GoodsTypeList,
          storeList: nextProps.storeList,
        }
      );
    }
  }
  formChange = (value) => {
    console.log(value);
    const filterData = { ...value };
    if (filterData.time) {
      filterData.Y = new Date(value.time).getFullYear().toString();
    } else {
      filterData.Y = '';
    }
    delete filterData.time;
    filterData.price = value.price || '';
    this.props.onChange(filterData);
  };
  render() {
    return (
      <IceFormBinderWrapper
        value={this.state.filterData}
        onChange={this.formChange}
        ref="form"
      >
        <Row wrap gutter="4">
          <Col l="5" className="FormCol">
            <div style={styles.formItem}>
              <span style={styles.SelectLabel}>分店选择</span>
              <IceFormBinder name="w_id">
                <Select placeholder="请选择分店" style={styles.Select} dataSource={this.state.storeList} size="large" autoWidth hasClear />
              </IceFormBinder>
            </div>
          </Col>
          <Col l="5" className="FormCol">
            <div style={styles.formItem}>
              <span style={styles.SelectLabel}>商品类别</span>
              <IceFormBinder name="class_id">
                <Select autoWidth placeholder="请选择商品类别" style={styles.Select} dataSource={this.state.GoodsTypeList} size="large" hasClear />
              </IceFormBinder>
            </div>
          </Col>
          <Col l="5" className="FormCol">
            <div style={styles.formItem}>
              <span style={styles.SelectLabel}>数据类型</span>
              <IceFormBinder name="price">
                <Select autoWidth placeholder="请选择数据类型" style={styles.Select} dataSource={dataType} size="large" hasClear={false} />
              </IceFormBinder>
            </div>
          </Col>
          <Col l="6" className="FormCol">
            <div style={styles.formItem}>
              <span style={styles.SelectLabel}>时间选择</span>
              <IceFormBinder name="time">
                <YearPicker style={styles.Select.DatePicker} size="large" />
              </IceFormBinder>
            </div>
          </Col>
        </Row>
      </IceFormBinderWrapper>
    );
  }
}

const styles = {
  overview: {
    h3: {
      fontSize: '20px',
      textAlign: 'left',
      lineHeight: '30px',
      fontFamily: 'SourceHanSans-Medium',
      color: '#333333',
      marginBottom: '20px',
    },
  },
  alignRight: {
    textAlign: 'right',
  },
  container: {
    padding: '0',
  },
  alignLeft: {
    float: 'left',
  },
  Select: {
    float: 'right',
    width: 'calc(100% - 100px)',
    height: '38px',
    // marginRight: '40px',
  },
  SelectLabel: {
    fontSize: '14px',
    lineHeight: '40px',
    float: 'left',
    margin: '0 10px 0 0',
    padding: '0',
    color: '#666',
    textAlign: 'right',
    maxWidth: '100px',
    minWidth: '60px',
  },
  Search: {
    width: '100%',
    marginLeft: '20px',
  },
  formItem: {
    display: 'flex',
    width: '100%',
    alignItems: 'center',
    margin: '10px 0',
  },
};
